<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增周报')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-weekly-add" enctype ="multipart/form-data">
        <div class="form-group">
            <label class="col-sm-3 control-label">周报起始日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="weeklyDateStart" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">周报结束日期：</label>
            <div class="col-sm-8">
                <div class="input-group date">
                    <input name="weeklyDateEnd" class="form-control" placeholder="yyyy-MM-dd" type="text">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">附件：</label>
            <div class="col-sm-8">
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                    <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="attachmentFile"></span>
                    <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                </div>
            </div>
        </div>
        <div id="taskContent">
                <span style="float:right;position:relative; width:80px;height:20px;" class="bs-glyphicons glyphicon glyphicon-plus" id="addTask">
                    <span onclick="addTask()"><a>添加任务</a></span>
                </span>
        </div>

    </form>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: select2-css" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script th:inline="javascript">
    var num=0
    function selectProduct(sel){
        var str = sel.name;
        let index = str.indexOf(".")
        str =str .substring(0,index);
        str += ".productId";
        var productType= sel.value;
        var url = "/system/product/"+ productType;
        if ("" === productType) {
            $("select[name='"+str+"']").empty();
            $("select[name='"+str+"']").append
            ('<option value="">请选择产品/项目</option>');
            $("select[name='"+str+"']").selectpicker('refresh');
            $("select[name='"+str+"']").selectpicker('render');
            return;
        }
        $.ajax({
            cache: true,
            type: "GET",
            url: url,
            async: false,
            success: function(result) {
                data = result.data
                if (result.code == web_status.SUCCESS) {
                    $("select[name='"+str+"']").empty();
                    for(var i in data){
                        // json = eval("("+data[i]+")");
                        var productId = data[i].productId;
                        var productName =data[i].productName;
                        $("select[name='"+str+"']").append
                        ('<option value="'+productId+'">'+productName+'</option>');
                    };
                    $("select[name='"+str+"']").selectpicker('refresh');
                    $("select[name='"+str+"']").selectpicker('render');
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    };
    var prefix = ctx + "system/weekly"
    function addTask() {
        var url;
        url = prefix + "/addTask/"+num;
        $.ajax({
            cache: true,
            type: "GET",
            url: url,
            async: false,
            success: function(result) {
                $("#addTask").after(result);
                num++;
            }
        });
    };
    function delTask(num) {
        var dev = "#div_" + num;
        $(dev).remove();
    };
    $("#form-weekly-add").validate({
        focusCleanup: true
    });
    $.fn.ghostsf_serialize = function () {
        var a = this.serializeArray();
        var $radio = $('input[type=radio],input[type=checkbox]', this);
        var temp = {};
        $.each($radio, function () {
            if (!temp.hasOwnProperty(this.name)) {
                if ($("input[name='" + this.name + "']:checked").length == 0) {
                    temp[this.name] = "";
                    a.push({name: this.name, value: ""});
                }
            }
        });
        return jQuery.param(a);
    };
    function submitHandler() {
        if ($.validate.form()) {
            // alert($('#form-weekly-add').serialize());
            $.operate.saveSync(prefix + "/add", new FormData(document.getElementById('form-weekly-add')));
        }
    }
    function initialDate(){
        $("input[name='weeklyDateStart']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        }).on('changeDate', function(event) {
            var value = $("input[name='weeklyDateStart']").val();
            if ('' == value) {
                return;
            }
            url = prefix + "/friday/" + value;
            $.ajax({
                cache: true,
                type: "GET",
                url: url,
                async: false,
                success: function(result) {
                    data = result.data
                    if (result.code == web_status.SUCCESS) {
                        $("input[name='weeklyDateEnd']").val(data);
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            });
        });
        var thisMonday=[[${thisMonday}]]
        $("input[name='weeklyDateStart']").val(thisMonday);
        $("input[name='weeklyDateEnd']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        var thisFriday=[[${thisFriday}]]
        $("input[name='weeklyDateEnd']").val(thisFriday);
    }

    $(function() {
        initialDate();
        addTask(num);
    });
</script>
</body>
</html>